<template>
  <div>
    <section class="content">
      <Card style="width:100%;">
        <p slot="title">预约类型管理</p>
        <div>
          <Tag
            v-for="(item,index) in count_scale"
            type="dot"
            closable
            color="primary"
            :key="index"
            :name="item.s_name"
            size="large"
            @on-close="deleteTag(item.s_id)"
          >{{item.s_name}}</Tag>
          <Button icon="ios-add" type="dashed" @click="addTag">添加预约类型</Button>
        </div>
      </Card>
    </section>
  </div>
</template>
<script>
import apis from "@/api/shop1";
export default {
  data() {
    return {
      value: "",
      count_scale: [],
    };
  },
  created() {
    this.get_appointType();
  },
  methods: {
    get_appointType() {
      apis
        .get_appointType()
        .then(response => {
          if (response.data.code == 200) {
              this.count_scale = response.data.data;
          } else {
            this.$Message.error("请求错误");
          }
        })
        .catch(error => {
          console.log(error);
          this.$Message.error("请求预约类型错误!");
        });
    },
    addTag() {
      var _this = this;
      this.value = "";
      this.$Modal.confirm({
        title: "预约类型",
        render: h => {
          return h("Input", {
            props: {
              value: this.value,
              autofocus: true,
              placeholder: "请输入预约类型"
            },
            on: {
              input: val => {
                this.value = val;
              }
            }
          });
        },
        onOk: () => {
          if (this.value == "" || this.value == undefined) {
            this.$Message.error("预约类型不能为空");
            return;
          }
          let data = {
            s_name: this.value,
          };
          apis
            .add_appointType(data)
            .then(response => {
              if (response.data.code == 200) {
                _this.get_appointType();
              } else {
                this.$Message.error("添加失败!");
              }
            })
            .catch(error => {
              console.log(error);
              this.$Message.error("添加失败!");
            });
        }
      });
    },
    deleteTag(id) {
      var _this = this;
      this.value = "";
      this.$Modal.confirm({
        title: `确定删除此预约类型？`,
        content: "删除后无法恢复",
        onOk: () => {
          let data = {
            s_id: id
          };
          console.log(data);
          apis
            .delete_appointType(data)
            .then(response => {
              if (response.data.code == 200) {
                _this.get_appointType();
              } else {
                this.$Message.error("删除失败");
              }
            })
            .catch(error => {
              console.log(error);
              this.$Message.error("删除失败!");
            });
        }
      });
    },
  }
};
</script>
<style>
    p{
        margin-bottom: 0px;
    }
</style>